前言

不論在哪個環境開發，都會使用到一些插件、套件，我們應該如何在 Nuxt.js 使用呢？又要如何配置呢？
今天將針對常用的一些套件，像是預處理器( SCSS 、 PUG )、 jQuery 、 Bootstrap 安裝做簡單說明。

如何在 Nuxt.js 使用預處理器？

Nuxt.js 超級方便，我們直接可以透過 lang 屬性在組件中的 <template> ， <script> 或 <style> 上使用各種預處理器。
非常簡單，直接加上 lang 屬性就可以爽爽用。

<template lang="pug">
  h1.red Hello {{ name }}!
</template>

<script lang="coffee">
  export default data: ->
    { name: 'World' }
</script>

<style lang="sass">
  .red
    color: red
</style>

<style lang="scss">
  .red {
    color: red;
  }
</style>

** 可是千萬記得，預處理器也要安裝對應的 Webpack loader **

npm install --save-dev pug@2.0.3 pug-plain-loader coffeescript coffee-loader node-sass sass-loader@10

用了什麼就記得裝什麼哦！
裝完就可以用了，不用另外設定什麼，是不是很簡單？

踩雷貼心提醒，因為 nuxt.js@2 使用的是 vue2 ，建議用 sass-loader@10

Vue.js 相關插件怎麼設定呢？

請先前往 plugins 資料夾，我們需要先創造一支 js 寫入相關引用設定
例如 plugins/vue-notifications.js

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

寫完了記得要告訴 nuxt.config.js 我們要使用這支 plugins

module.exports = {
  plugins: ['~/plugins/vue-notifications']
}

關於在 nuxt.config.js 對 plugins 的配置，除了字串外，也可以使用物件增加額外配置
如果使用 Object， 其具有以下屬性：
src: String (文件的路徑)
ssr: Boolean (默認為 true) 如果值為 false，該文件只會在客戶端被打包引入。

jQuery

首先我們需要透過npm安裝

npm install jquery --save

然後我們想要全域使用 $ ，就需要添加 Webpack 插件設定
請洽 nuxt.config.js

import webpack from 'webpack'

module.exports = {
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        // ...etc.
      })
    ]
  }
}

使用 ESLint 的捧由，記得在 .eslintrc.js 啟用 jQuery 全局變量，就不會跳錯囉！

module.exports = {
  env: {
    jquery: true
  },
}

Bootstrap

起手式，npm安裝

npm install bootstrap

Bootstrap 有兩個地方要配置，分別是 CSS 與 JS

• CSS 配置
  我習慣是會以 all.scss 為主檔案，在此 import bootstrap 的變數與 scss 來使用
  首先先到 assets/scss/ 建立自己的 all.scss
  然後我們打開 node_modules/bootstrap/scss 就會看到一堆一堆的 scss 檔案，先不用緊張。
  我們先取用 _variables.scss 到 assets/scss/helpers 裡面，為什麼呢？
  因為我們要客製化自己的變數，而 _variables.scss 就是變數設定檔，我們取出來改成自己的版本。
  有了我們自己的變數檔之後，要怎麼做使用呢？
  請回到我們 assets/scss/all.scss

@import '~bootstrap/scss/functions';
@import './helpers/_variables';
@import '~bootstrap/scss/bootstrap';

這樣 scss 就會透過 bootstrap 的functions整合我們自訂義的_variables，編譯後一起使用了唷！

最後要記得將 all.scss 套用到頁面中，怎麼做呢？請洽 nuxt.config.js

export default {
  css: ['~assets/scss/all.scss'],
}

• JS 配置
  提醒，Bootstrap5 有用到 Popper ，Bootsrap4 另外還用到 jQuery，使用前請記得先安裝哦。
  jQuery 請參考上方教學。

Popper 安裝

npm install @popperjs/core

Bootsrap 設定
因為使用第三方插件，所以需要做些設定來啟用。
一樣請洽 nuxt.config.js，我們要做 plugins 設定

export default {
  plugins: [
    {
      src: '~/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
      ssr: false
    }
  ],
}

可能有些人會疑惑，上面這個 ssr:false 是什麼意思？
ssr: Boolean (默認為 true) 如果值為 false，該文件只會在客戶端被打包引入。
設定了這個才能避免找不到文件的錯誤。
但實際會跳錯的原因我也還沒有想通，反正先設定false就不會有錯誤，可以正常使用囉！

如果誰知道為什麼一開始就打包引入會跳錯的話，可以跟我說一聲嗎？哈哈